<template>        
    <Modal
        v-model="modal"
        title="批量商品标签"
        @on-ok="onSave"
        @on-cancel="modal = false">
        <div>
            <div class="mb">
                <Checkbox
                    :indeterminate="indeterminate"
                    :value="checkAll"
                    @click.prevent.native="handleCheckAll">全选</Checkbox>
            </div>
            <CheckboxGroup v-model="checkAllGroup" @on-change="checkAllGroupChange">
                <Checkbox v-for="(item, index) in tagArr" :key="index" :label="item.id">{{item.name}}</Checkbox>
            </CheckboxGroup>
        </div>
    </Modal>
</template>

<script>
export default {
  props:{
    productIds:Array
  },
  data() {
    return {
      modal: false,
      indeterminate: false,
      checkAll: false,
      checkAllGroup: [],
      tagArr: []
    };
  },
  methods: {
    getTagData() {
      this.indeterminate= false;
      this.checkAll= false;
      this.checkAllGroup= [];

			this.$ajaxGet('/product/tag/product_center/all').then(data => {
        this.tagArr = (data || []).map(item => {
					return {
						id: item.id,
						name: item.name
					}
				});
      });

      this.openModal();
		},
    openModal() {
      this.modal = true;
    },
    closeModal() {
      this.modal = false;
    },
    onSave() {
      let param = {
        productIds: this.productIds,
        tagIds: this.checkAllGroup
      }
      this.$ajaxPost('/product/business/update_tags', param).then(data =>{
        this.$Notice.success({
          title: '设置成功'
        })
        this.$emit('update');
        this.closeModal();
      })
    },
    handleCheckAll() {
      if (this.indeterminate) {
        this.checkAll = false;
      } else {
				this.checkAll = !this.checkAll;
      }
      this.indeterminate = false;
      if (this.checkAll) {
        this.checkAllGroup = this.tagArr.map(item => item.id);
      } else {
        this.checkAllGroup = [];
      }
    },
    checkAllGroupChange(data) {
      if (data.length === this.tagArr.length) {
        this.indeterminate = false;
        this.checkAll = true;
      } else if (data.length > 0) {
        this.indeterminate = true;
        this.checkAll = false;
      } else {
        this.indeterminate = false;
        this.checkAll = false;
      }
    }
  }
};
</script>
